/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
@import '../../../styles/variables.scss';

@mixin generate-color($color) {
  background-color: $color;

  .link-to-detail:hover {
    background-color: darken($color, 10%);
  }
}

.overview-header {
  display: flex;
  color: white;
  padding: 10px 16px;
  position: relative;

  &.message-placeholder {
    padding: 0;
  }

  &.artifact {
    @include generate-color($artifact-entity-header-bg);
  }

  &.application {
    @include generate-color($application-entity-header-bg);
  }

  &.cdap-data-pipeline,
  &.cdap-data-streams {
    @include generate-color($datapipeline-entity-header-bg);
  }

  &.datasetinstance {
    @include generate-color($datasetinstance-entity-header-bg);
  }

  &.stream {
    @include generate-color($stream-entity-header-bg);
  }

  .success-message {
    position: absolute;
    width: 100%;
    background: $success-message-bg;
    top: 0;
    left: 0;
    color: white;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }

  .header {
    flex: 1;
    display: flex;
    align-items: center;
    svg,
    h4 {
      margin: 0 2px;
    }
    h4 {
      font-size: 17px;
    }
    svg {
      height: 15px;
      width: 15px;
    }
  }
  .link-to-detail {
    margin-right: 50px;
    color: white;
    display: inline-block;
    padding: 0 15px;
    margin-top: -10px;
    margin-bottom: -10px;
    line-height: 40px;

    &:hover { text-decoration: none; }
  }
  .icon-close {
    height: 19px;
    width: 19px;
    cursor: pointer;
  }
}
